<template>
  <div class="info">
    <p class="title">编辑歌单</p>
    <hr/>
    <div class="personal">
      <el-form :model="registerForm" class="demo-ruleForm" label-width="80px">
        <el-form-item prop="title" label="歌单名称">
          <el-input v-model="registerForm.title" placeholder="歌单名称"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" label="介绍">
          <el-input  placeholder="介绍" v-model="registerForm.introduction" ></el-input>
        </el-form-item>
        <el-form-item prop="style" label="风格">
          <el-input v-model="registerForm.style" placeholder="风格"></el-input>
        </el-form-item>
      </el-form>
    <div class="btn">
      <div @click="saveMsg()">保存</div>
      <div @click="goback">取消</div>
    </div>
    </div>
</div>
</template>

<script>
import mixin from '../mixin'
import { mapGetters } from 'vuex'
import { cities } from '../assets/data/form'
import { HttpManager } from '../api/index'

export default {
  name: 'info',
  mixins: [mixin],
  data: function () {
    return {
      registerForm: { // 修改信息
        title: '',
        introduction: '',
        style: ''
      },
      songListId: '-1',
      singers: {}
    }
  },
  computed: {
    ...mapGetters([
      'tempList'
    ])
  },
  created () {
    this.songListId = this.tempList.id // 给歌单ID赋值
    this.singers = this.tempList
  },
  mounted () {
    this.getMsg()
  },
  methods: {
    getMsg () {
      this.registerForm.title = this.singers.title
      this.registerForm.introduction = this.singers.introduction
      this.registerForm.style = this.singers.style
    },
    goback () {
      this.$router.go(-1)
    },
    saveMsg () {
      let params = new URLSearchParams()
      params.append('id', this.songListId)
      params.append('title', this.registerForm.title)
      params.append('introduction', this.registerForm.introduction)
      params.append('style', this.registerForm.style)
      HttpManager.setUserSongList(params)
        .then(res => {
          if (res.code === 1) {
            this.$notify.success({
              title: '编辑成功',
              showClose: true
            })
          } else {
            this.$notify.error({
              title: '编辑失败',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/info.scss';
</style>
